<template>
  <div class="vpd-form-wrap" :style="{
          width: val.w + 'px',
          height: val.h + 'px',
          border: val.borderWidth+ 'px solid '+val.borderColor,
          backgroundColor: val.backgroundColor
       }">
    <div class="vpd-form-title" v-if="showTitle"
         :style="{
          height: val.titleHeight+'px',
          lineHeight:val.titleHeight+'px'
         }">
      <vpd-text v-if="val.title && val.title.type" :val="val.title"/>
      <span v-else>{{val.title}}</span><!--  兼容最早的字符串标题 -->
    </div>
    <div class="vpd-form-tabs" v-if="groupNum > 0">
      <div class="vpd-form-tab" v-for="index of groupNum" :key="index">
        <el-divider v-if="index!==1" direction="vertical"></el-divider>
        <el-link :type="activeGroup===index?'primary':'info'" :underline="false" @click="changeGroup(index)">
          {{val.groupName}}{{index}}
        </el-link>

      </div>
    </div>
    <div class="vpd-form-content" :style="contentStyle">
      <el-row class="data-grid border">
        <el-col v-for="item in labels" :key="item.$index" :span="item.span">
          <div class="grid-col-left" :style="{width: val.labelWidth+'px'}">{{item.name}}</div>
          <div class="grid-col-right">
            {{getValue(item)}}
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
  import StylePane from './style.vue';
  import dataMixin from '../mixins/data';
  import {prefixInt} from '@/utils/index';
  import VpdText from '../text/index'

  const NAME = 'vpd-form';
  const setting = {
    type: NAME,
    title: '表单',
    dataType: 'json', //期望的数据格式
    x: 0,
    y: 0,
    w: 400,
    h: 400,
    minWidth: 200,
    minHeight: 100,

    titleHeight: 30,

    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#E8EBEE',
    labelWidth: 100,
    labels: [],

    groupField: '', //分组显示时，分组数量的字段
    groupName: '模块',
  };
  export default {
    mixins: [dataMixin],
    name: NAME,
    icon: 'vpd-form',
    title: '表单',
    panel: StylePane,
    setting: setting,
    props: {
      val: {
        type: Object
      }
    },
    components: {
      VpdText
    },
    data() {
      return {
        setting: JSON.parse(JSON.stringify(setting)),
        activeGroup: 1,
        data: {},
      }
    },
    computed: {
      showTitle() {
        return (this.val.title && !this.val.title.type) || (this.val.title && this.val.title.text)
      },
      groupNum() { //模块数量
        if (this.val.groupNum) {
          return Number(this.val.groupNum);
        }
        console.log('this.val.groupField', this.val.groupField, this.data[this.val.groupField]);
        try {
          if (this.val.groupField) {
            let value = this.data[this.val.groupField];
            if (value) {
              return Number(value);
            }
          }
          return 0;
        } catch (e) {
          return 0;
        }

      },
      labels() {
        if (this.groupNum > 0) {
          return this.val.labels.map(b => {
            b.code = b.code.substr(0, b.code.length - 3) + prefixInt(this.activeGroup, 3);
            return b;
          });
        }
        return this.val.labels;
      },
      contentStyle() {
        let height = this.val.h;
        height -= this.val.borderWidth * 2;
        if (this.showTitle) {
          height -= this.val.titleHeight;
        }
        if (this.groupNum > 0) {
          height -= 30;
        }
        return {
          height: height + 'px'
        }
      }
    },
    watch: {},
    mounted() {

    },
    methods: {

      changeGroup(index) {
        this.activeGroup = index;
      },
      getValue(item) {
        if (!item.code || this.data[item.code] === undefined || this.data[item.code] === null) {
          return '';
        }
        let val = String(this.data[item.code]);

        if (item.enum) { //如果有定义枚举，用枚举转换值
          if (item.enum === 'datetime') {
            return this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
          } else {
            const map = item.enum.split(',').reduce((prev, current) => {
              const arr = current.split(':');
              prev[arr[0]] = arr[1];
              return prev;
            }, {});
            if (map[val]) {
              return map[val];
            }
          }

        }
        return val;
      },
      updateData(data, data2) {
        console.log('form updateData', data, data2);
        this.data = data2 || data || {};
      }
    }
  }
</script>
<style lang="scss" scoped>
  .vpd-form-wrap {
    overflow-y: auto;
  }

  .vpd-form-title {
    padding: 0 10px;
  }

  .vpd-form-tabs {
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    display: flex;

    .vpd-form-tab {
      /*margin-right: 5px;*/
    }
  }

  .vpd-form-content {
    overflow-y: auto;
  }

  .data-grid {
    width: 100%;
    color: #303133;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;

    .el-col {
      display: flex;
    }

    .grid-col-left {
      width: 100px;
      line-height: 20px;
      word-break: break-word;
      padding: 7px 6px;
      display: flex;
      align-items: center;
    }

    .grid-col-right {
      padding: 7px 6px;
      word-break: break-word;
      flex: 1;
      display: flex;
      align-items: center;
    }

  }

  .data-grid.border {
    border-bottom: 1px solid #ecedee;
    border-right: 1px solid #ecedee;

    .el-col {
      border-top: 1px solid #ecedee;
    }

    .grid-col-left {
      background-color: #fbfbfc;
      color: #73777a;
      border-left: 1px solid #ecedee;
      border-right: 1px solid #ecedee;
    }

  }

</style>
